<template>
	<view style="position: relative;">
		<view style="display: flex;" class="box">
			<image src="../../static/icons/地址管理.png" style="width: 40rpx;margin-left: 2px;margin-top: 2px"
				mode="widthFix">
				<view style="margin-left: 2px;">
					<view>{{addressData.username}}{{addressData.phone}}</view>
					<view style="width: 280px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;">
						{{addressData.address}}<span style="margin-left: 5px;">{{addressData.door}}</span>
					</view>
				</view>
				<view style="margin-left: 10px;font-weight: bold;margin-top: 8px;">
					<button size="mini"
						style="border-radius: 30px;width: 60px;font-size: 12px;border: 1px solid gray;color: gray;"
						@click="toggle4('bottom')">修改</button>
				</view>
		</view>
		<view class="box" style="margin-top: 10px;">
			<view style="display: flex;">
				<view style="flex: 3; font-size: 18px;font-weight: bold;margin-top: 3px;"
					@click="goBusinessDetail(ordersData.businessId)">云南药店 ></view>
				<button style="flex: 1;color: orange;font-size: 12px;font-weight: bold; 
					border-radius: 30px;border: 1px solid orange;background-color: white" @click="addCart(ordersData)">加入购物车</button>
			</view>
			<view style="margin-top: 10px;" @click="goMedicinesDetail(ordersData.medicinesId)">
				<view style="display: flex;">
					<image :src="ordersData.stylePhoto" style="width: 180rpx;" mode="widthFix"></image>
					<view>
						<view style="display: flex;">
							<view>
								<view
									style="font-size: 18px; font-weight: bold; width: 190px;margin-left: 10px;margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;">
									{{ordersData.medicinesName}}
								</view>
								<view
									style="font-size: 14px; font-weight: bold;margin-left: 10px;color: gray;margin-top:8px;">
									样式规格:{{ordersData.styleDescribe}}
								</view>
							</view>
							<view style="margin-top: 5px;margin-left: 15px;">
								<view style="font-size: 15px;font-weight: bold;">￥{{ordersData.totalPrice}}</view>
								<view style="font-size: 15px;font-weight: bold;display: flex;">
									<image src="../../static/icons/叉.png" style="width: 20rpx;margin-top: 5px;"
										mode="widthFix"></image>
									<view style="margin-left: 2px;">{{ordersData.num}}</view>
								</view>
							</view>
						</view>
						<view style="display: flex;font-size: 12px;margin-left: 10px;margin-top: 3px;">
							<view
								style="margin-top: 10rpx;margin-left: 2px;border: 1px solid orange;color: orange;padding: 2px;">
								假一赔四
							</view>
							<view
								style="margin-top: 10rpx;margin-left: 2px;border: 1px solid orange;color: orange;padding: 2px;">
								退货宝
							</view>
							<view
								style="margin-top: 10rpx;margin-left: 2px; border: 1px solid orange;color: orange;padding: 2px;">
								极速退款
							</view>
							<view
								style="margin-top: 10rpx;margin-left: 2px;border: 1px solid orange;color: orange;padding: 2px;">
								七天无理由退货
							</view>
						</view>
					</view>
				</view>
			</view>
			<view style="margin-top: 10px;">
				<view style="display: flex;margin-top: 10px;">
					<view style="flex: 3;">商品总价</view>
					<view style="flex: 1; color:gray;">商品总价</view>
					<view style="flex: 1;font-weight: bold;">￥{{ordersData.totalPrice}}</view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view style="flex: 3;">数量</view>
					<view style="flex: 1; color:gray;">数量(件)</view>
					<view style="flex: 1;font-weight: bold;display: flex;">
						<image src="../../static/icons/叉.png" style="margin-left: 2px; width: 20rpx;margin-top: 5px;"
							mode="widthFix"></image>
						<view style="margin-left: 2px;">{{ordersData.num}}</view>
					</view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view style="flex: 3;">运费</view>
					<view style="flex: 1; color:gray;">运费(快递)</view>
					<view style="flex: 1;font-weight: bold;">￥0.00</view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view style="flex: 3;">需付款</view>
					<view style="flex: 1; color:gray;">实付</view>
					<view style="flex: 1;font-weight: bold;">￥{{ordersData.totalPrice}}</view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view style="flex: 6;">订单编号</view>
					<view style="flex: 5;font-weight: bold;color: gray;">{{ordersData.orderId}} | <strong
							style="color: black;margin-left: 2px;">复制</strong></view>
				</view>
				<view style="display: flex;margin-top: 10px;">
					<view style="flex: 6;">下单时间</view>
					<view style="flex: 5;font-weight: bold;color: gray;">{{ordersData.orderData}}</view>
				</view>
				<view style="display: flex;margin-top: 10px;" v-if="ordersData.status !== '待付款'&&ordersData.status !== '待发货'">
					<view  style="flex: 6;">发货时间</view>
					<view style="flex: 5;font-weight: bold;color: gray;">{{ordersData.deliverTime}}</view>
				</view>
			</view>
			<view class="square-box"
				style="background-color:#E1E1E1;border: 1px solid #E1E1E1;margin-top: 2px;width: 100%;padding: 2px;display: flex;">
				<image v-if="ordersData.status === '待付款'" src="../../static/icons/时间.png"
					style="width: 40rpx;margin-top: 5px;margin-left: 4px;" mode="widthFix"></image>
				<image v-if="ordersData.status === '待发货'" src="../../static/icons/拣货中.png"
					style="width: 40rpx;margin-top: 5px;margin-left: 4px;" mode="widthFix"></image>
				<image v-if="ordersData.status === '待收货'" src="../../static/icons/小货车.png"
					style="width: 40rpx;margin-top: 5px;margin-left: 4px;" mode="widthFix"></image>
				<image v-if="ordersData.status === '待评价'" src="../../static/icons/签收.png"
					style="width: 40rpx;margin-top: 5px;margin-left: 4px;" mode="widthFix"></image>
				<view v-if="ordersData.status === '待付款'"
					style="color: #FF8040; font-size: 15px; margin-top: 4px; margin-left: 4px;">订单即将关闭，建议尽快付款
				</view>
				<view v-if="ordersData.status === '待发货'"
					style="color: #FF8040; font-size: 15px; margin-top: 4px; margin-left: 4px;">
					商家正在拣货中，最迟24小时内发货</view>
				<view v-if="ordersData.status === '待收货'"
					style="color: #FF8040; font-size: 15px; margin-top: 4px; margin-left: 4px;">运输中 预计11月24日送达
				</view>
				<view v-if="ordersData.status === '已完成'"
					style="color: #FF8040; font-size: 15px; margin-top: 4px; margin-left: 4px;">您的快件已签收，签收人张老三
				</view>
				<!-- 如果需要处理'待评价'状态，可以添加如下代码 -->
				<view v-if="ordersData.status === '待评价'"
					style="color: #FF8040; font-size: 15px; margin-top: 4px; margin-left: 4px;">您的订单已完成，欢迎评价
				</view>
			</view>
		</view>
		<view class="box" style="margin-top: 10px;">
			<view>
				<view style="display: flex;">
					<view style="font-weight: bold;font-size: 16px;">
						宝贝服务
					</view>
					<view>
						<image src="../../static/icons/问号.png" style="width: 40rpx;margin-left: 2px;margin-top: 2px"
							mode="widthFix" @click="toggle('bottom')">
					</view>
				</view>
				<view style="display: flex;">
					<view style="display: flex;margin-top: 5px;">
						<image src="../../static/icons/保障.png" style="width: 50rpx;margin-top: 5px;" mode="widthFix">
						</image>
						<view style="margin-top: 10px;">
							假一赔四
						</view>
					</view>
					<view style="display: flex;margin-top: 5px;margin-left:5px;">
						<image src="../../static/icons/保障.png" style="width: 50rpx;margin-top: 5px;" mode="widthFix">
						</image>
						<view style="margin-top: 10px;">
							退货宝
						</view>
					</view>
					<view style="display: flex;margin-top: 5px;margin-left: 5px;">
						<image src="../../static/icons/保障.png" style="width: 50rpx;margin-top: 5px;" mode="widthFix">
						</image>
						<view style="margin-top: 10px;">
							极速退款
						</view>
					</view>
					<view style="display: flex;margin-top: 5px;margin-left: 5px;">
						<image src="../../static/icons/保障.png" style="width: 50rpx;margin-top: 5px;" mode="widthFix">
						</image>
						<view style="margin-top: 10px;">
							7天无理由退货
						</view>
					</view>
				</view>
			</view>
		</view>
		<view>
			<!-- 保障弹窗 -->
			<uni-popup ref="popup" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view style="margin-bottom: 10px;padding: 10px;">
						<view style="font-size: 15px;font-weight: bold;">假一赔四</view>
						<view style="margin-top: 10px;">如果消费者购买的商品被证实为假货，商家不仅要全额退款，还需要按照商品原价的四倍对消费者进行赔偿</view>
					</view>
					<view style="margin-bottom: 10px;padding: 10px;">
						<view style="font-size: 15px;font-weight: bold;">退货宝</view>
						<view style="margin-top: 10px;">退货运费险保障：选择上门取件，自动减免首重运费；若选择自寄，参照首重标准补偿，具体以“订单详情-退货宝”为准</view>
					</view>
					<view style="margin-bottom: 10px;padding: 10px;">
						<view style="font-size: 15px;font-weight: bold;">极速退款</view>
						<view style="margin-top: 10px;">满足相应条件时，信誉良好的用户在退货寄出后，享受极速退款到账。</view>
					</view>
					<view style="margin-bottom: 10px;padding: 10px;">
						<view style="font-size: 15px;font-weight: bold;">7天无理由退货</view>
						<view style="margin-top: 10px;">满足相应条件（密封包装拆封后不支持）时，消费者可申请“7天无理由退换货”</view>
					</view>
					<button type="warn" @click="closetoggle">我知道了</button>
				</view>
			</uni-popup>
		</view>
		<view>
			<!-- 地址弹窗 -->
			<uni-popup ref="popup4" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<scroll-view scroll-y="true" style="height: 400px; position: relative;">
						<view style="padding: 20px;" class="box">
							<view style="text-align: center; font-weight: bold; font-size: 16px;">地址和配送服务</view>
							<view style="display: flex;">
								<view style="font-weight: bold; font-size: 14px;">常用地址</view>
								<image src="../../static/icons/添加.png"
									style="width: 30rpx; margin-left: 180px; margin-top: 3px;" mode="widthFix">
									<view style="color: #FF8040; font-weight: bold;" @click="goAddress()">管理和添加地址</view>
							</view>
							<view style="margin-top: 10px;" v-for="(address, index) in addressList" :key="index">
								<button @click="changeAddress(address, index)"
									:class="{ 'is-active': selectedButtonIndex2 === index }">
									<view style="text-align: start; display: flex;">
										<view style="flex: 10;">
											<view style="font-size: 10px; color: #808080; line-height: 20px;">
												{{address.address}}
											</view>
											<view
												style="font-size: 12px; color: black; line-height: 20px; font-weight: bold;">
												{{address.door}}
											</view>
											<view style="font-size: 11px; line-height: 20px;">{{address.username}}
												{{address.phone}}
											</view>
										</view>
										<view style="flex: 1;">
											<image src="../../static/icons/编辑.png"
												style="width: 30rpx; margin-top: 5px;" mode="widthFix">
										</view>
									</view>
								</button>
							</view>
						</view>
						<view style="padding: 20px;margin-top: 10px;height: 200px;" class="box">
							<view style="font-size: 16px;font-weight: bold;">配送服务</view>
							<view style="display: flex;margin-top: 10px;">
								<view style="flex: 3;color: black;">普通配送</view>
								<view style="display: flex;flex: 1;color: black;">
									<view>快递 包邮</view>
								</view>
								<view>
									<image src="../../static/icons/对.png" style="width: 30rpx; margin-top: 2px;"
										mode="widthFix">
								</view>
							</view>
							<view style="display: flex;margin-top: 10px;">
								<view style="flex: 3;color: black;">退货宝</view>
								<view style="display: flex;flex: 1;color: black;">
									<view>免费</view>
								</view>
								<view>
									<image src="../../static/icons/对.png" style="width: 30rpx; margin-top: 2px;"
										mode="widthFix">
								</view>
							</view>
							<view style="display: flex;">
								<view style="margin-top: 10px;display: flex;">
									<view style="color: black;">号码保护</view>
									<view style="margin-left: 4px; color: #808080;">
										<view>隐藏收件人真实手机号，保护隐私</view>
									</view>
								</view>
								<view style="margin-top: 4px;padding-right: 0;">
									<switch color="#FF8040" style="transform:scale(0.6);margin-left: 20px;" />
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
				<view style="position: fixed; top: 2px; right: 4px;" @click="closetoggle4">
					<image src="../../static/icons/叉.png" style="width: 30rpx; margin-left: 2px;" mode="widthFix">
				</view>
				<view style="position: fixed; display: flex; bottom: 0; width: 100%; height: 50px;">
					<button @click.native.stop="saveAddress"
						style="flex: 1; border: none; background-color: #ff4444; color: white; font-size: 16px;">
						确定
					</button>
				</view>
			</uni-popup>
		</view>
		<view style="display: flex;margin-top: 5px;gap: 5px;position: fixed;bottom: 0;width: 100%;" class="box">
			<button size="mini"
				style="border-radius: 15px;margin-left: 40px;background-color: white;border: 1px solid #E1E1E1;"
				@click.native.stop='addCart(ordersData)'>加入购物</button>
			<button size="mini" style="border-radius: 15px;background-color: white;border: 1px solid #E1E1E1;"
				@click.native.stop='chat(ordersData.businessId)'>联系客服</button>
			<button v-if="ordersData.status === '待付款'" size="mini"
				style="border-radius: 15px;color: #FF8040;border: 1px solid #FF8040;background-color: white;"
				@click.native.stop="updatePay(ordersData)">继续付款</button>
			<button v-if="ordersData.status === '待发货'" size="mini"
				style="border-radius: 15px;color: #FF8040;border: 1px solid #FF8040;background-color: white;"
				@click.native.stop='toggle2'>催促发货</button>
			<button v-if="ordersData.status === '待收货'" size="mini"
				style="border-radius: 15px;color: #FF8040;border: 1px solid #FF8040;background-color: white;"
				@click.native.stop="updateStatus(ordersData, '待评价')">确认收货</button>
			<button v-if="ordersData.status === '待评价'" size="mini"
				style="border-radius: 15px;color: #FF8040;border: 1px solid #FF8040;background-color: white;"
				@click.native.stop="goCommentDetail(ordersData,'已完成')">进行评价</button>
			<button v-if="ordersData.status === '已完成'" size="mini"
				style="border-radius: 15px;color: #FF8040;border: 1px solid #FF8040;background-color: white;"
				disabled>订单完成</button>
		</view>
		<view>
			<uni-popup ref="popup2" background-color="#fff" @change="change">
				<view class="popup-content" :class="{ 'popup-height': type === 'left' || type === 'right' }">
					<view style="padding: 10px;height: 250px;" class="box">
						<view style="text-align: center;margin-top: 20px;">
							<image src="../../static/icons/催促.png"
								style="width: 120rpx;margin-top: 5px;margin-left: 4px;" mode="widthFix"></image>
						</view>
						<view style="text-align: center;font-size: 16px;font-weight: bold;margin-top: 10px;">提醒发货成功
						</view>
						<view style="width: 200px;text-align: center;margin-left: 80px;margin-top: 10px;">
							已提醒卖家发货，若你着急要货，建议您直接与卖家沟通</view>
						<view style="display: flex;margin-top: 10px;">
							<button style="background-color: yellow;border-radius: 30px;width: 100%;font-size: 16px;"
								size="mini" @click.native.stop='chat(ordersData.businessId)'>联系客服</button>
							<button style="background-color: orange;border-radius: 30px;width: 100%;font-size: 16px;"
								size="mini" @click="closetoggle2">我知道了</button>
						</view>
					</view>
				</view>
			</uni-popup>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				user: uni.getStorageSync('xm-user'),
				type: 'bottom',
				labels: [{
						id: 1,
						name: '多系统萎缩'
					},
					{
						id: 2,
						name: '帕金森病'
					},
					{
						id: 3,
						name: '阿尔茨海默病'
					},
					{
						id: 4,
						name: '脑卒中'
					},
				],
				selectAddressId: '',
				ordersData: '',
				orderId: '',
				addressData: {},
				selectedButtonIndex2: null,
			}
		},
		onLoad(option) {
			this.orderId = option.orderId; // 转换为整数
		},
		onShow() {
			this.loadOrders()
			this.loadAddressList()
		},
		methods: {
			closetoggle() {
				this.$refs.popup.close()
			},
			addCart(order) {
				let data = {
					num: order.num,
					totalPrice: order.totalPrice,
					businessId: order.businessId,
					medicinesStyleId: order.medicinesStyleId,
					medicinesId: order.medicinesId,
				}
				this.$request.post('/cart/add', data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '加入成功'
						})
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			saveAddress() {
				if (!this.selectAddressId) {
					uni.showToast({
						icon: 'error',
						title: '请选择收货地址'
					})
					return
				}
				let data = {
					id: this.orderId,
					userId: this.user.id,
					addressId: this.selectAddressId
				}
				this.$request.put('/order/update', data).then(res => {
					if (res.code === '200') {
						uni.showToast({
							icon: 'success',
							title: '修改成功'
						})
						this.loadOrders()
					} else {
						this.$message.error(res.msg)
					}
				})
				this.closetoggle4()
			},
			loadAddressList() {
				this.$request.get('/address/selectAll').then(res => {
					if (res.code === '200') {
						// 按销量从高到低排序
						this.addressList = res.data;
					} else {
						this.$message.error(res.msg);
					}
				});
			},
			loadAddress(addressId) {
				this.$request.get(`/address/selectById/${addressId}`).then(res => {
					if (res.code === '200') {
						this.addressData = res.data
					} else {
						this.$message.error(res.msg)
					}
				})
			},
			chat(chatId) {
				// 发送第一个请求以获取 chatRoleId1 和 chatRoleId2
				this.$request.post('/chatRole/add', {
					businessId: chatId,
					userId: this.user.id
				}).then(res => {
					if (res.code === '200') {
						// 获取返回的 mapData
						const resultMap = res.data; // resultMap 应该包含 chatRoleId1 和 chatRoleId2
						// 从 resultMap 中提取 ID
						const chatRoleId1 = resultMap.chatRoleId1;
						const chatRoleId2 = resultMap.chatRoleId2;
						// 使用提取的 ID 发送第二个请求
						this.$request.post('/chatGroup/add', {
							chatUserId: chatRoleId1,
							userId: chatRoleId2
						}).then(res => {
							if (res.code === '200') {
								// 请求成功，跳转到聊天页面
								this.$router.push({
									path: '/pages/chatDetail/chatDetail',
									query: {
										chatId: chatId,
										role: 'BUSINESS'
									}
								});
							} else {
								// 显示错误信息
								this.$message.error(res.msg);
							}
						});
					} else {
						// 显示错误信息
						this.$message.error(res.msg);
					}
				});
			},
			loadOrders() {
				this.$request.get(`/order/selectById/${this.orderId}`).then(res => {
					this.ordersData = res.data;
					this.loadAddress(res.data.addressId)
				});
			},
			changeAddress(address, index) {
				this.selectedButtonIndex2 = index
				this.selectAddressId = address.id
			},
			goBusinessDetail(businessId) {
				uni.navigateTo({
					url: '/pages/businessDetail/businessDetail?businessId=' + businessId
				})
			},
			goMedicinesDetail(medicinesId) {
				uni.navigateTo({
					url: '/pages/medicinesDetail/medicinesDetail?medicinesId=' + medicinesId
				})
			},
			toggle(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup.open(type)
			},
			closetoggle2() {
				this.$refs.popup2.close()
			},
			toggle2(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup2.open(type)
			},
			toggle4(type) {
				this.type = type
				// open 方法传入参数 等同在 uni-popup 组件上绑定 type属性
				this.$refs.popup4.open(type)
			},
			closetoggle4() {
				this.$refs.popup4.close()
			},
			goAddress() {
				uni.navigateTo({
					url: '/pages/address/address'
				})
			},
		}
	}
</script>

<style>
	.is-active {
		background-color: #FFF7F3;
		/* 选中状态的背景颜色示例 */
		color: #FF5000;
		/* 文本颜色 */
		border-color: #FF5000;
		/* 边框颜色 */
	}
</style>